<template>
  <div class="page-buttons">
    <div class="block-btn">
      <div class="btn1">快速开始</div>
    </div>

    <div class="list">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="block-title">
          <h5>{{ item.blockTitle }}</h5>
          <div class="arrow"></div>
        </div>
        <div class="block-3dscroll">
          <div class="block-content">
            <div class="tag">{{ item.tag }}</div>
            <div class="title">{{ item.title }}</div>
            <div class="desc">{{ item.desc }}</div>
            <div class="img"><img :src="item.img" /></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const list = ref([
  { blockTitle: '生产力全面提升', tag: '研究报告', title: '市场调研报告分析', desc: '分析一下国家电投近几年整体的发展情况和投资情况，包括重点行业布局、出资趋势等等信息，形成一份深入详细的报告，同时做一个可视化的网页', img: 'https://static-cdn.yuanxinbaoxian.com/prod/images/TU/img1.png' },
  { blockTitle: '专家能力深度支持', tag: '股票专家', title: '股票早报定制', desc: '对比一下顺丰、圆通、申通、韵达的股价表现和财务情况，哪家更值得投资', img: 'https://static-cdn.yuanxinbaoxian.com/prod/images/TU/img2.png' },
  { blockTitle: '协作模式灵活调整', tag: '游戏评测', title: '游戏攻略撰写', desc: '《黑神话悟空》的详细游戏介绍文档，包括发布后的完整时间线梳理，覆盖每个关卡的详细介绍，基础的技能操作介绍、连招介绍、同时列举出最受欢迎的套装top5以及原因，最后报告用可视化的网页呈现', img: 'https://static-cdn.yuanxinbaoxian.com/prod/images/TU/img3.png' },
  { blockTitle: '能力边界拓展延伸', tag: '高德地图', title: '香格里拉旅游攻略制作', desc: '我需要一个10月1-7日从上海出发的7天香格里拉行程，总共一行5人，预算为10万人民币左右。我们喜欢历史遗迹、隐藏的宝地和藏区文化。我们想飞到丽江后一路自驾，请提供详细的行程安排和一个简单的HTML旅行手册，包含地图、景点描述、必备的装备和我们整个旅程中可以参考的旅行小贴士', img: 'https://static-cdn.yuanxinbaoxian.com/prod/images/TU/img4.png' }
])
</script>

<style lang="scss" scoped>
.mt10 {
  margin-top: 10px;
}
@keyframes border-glint {
  0% {
    background-position: 0, -250px;
  }
  25% {
    background-position: 0, -200px;
  }
  75% {
    background-position: 0, 50px;
  }
  100% {
    background-position: 0, 50px;
  }
}
@keyframes glinet-t {
  0% {
    left: -120%;
  }
  8% {
    left: 50%;
  }
  100% {
    left: 50%;
  }
}
@keyframes rotate-scroll {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-1turn);
  }
}
.page-buttons {
  width: 1440px;
  height: calc(100vh - 213px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  .block-btn {
    position: relative;
    .btn1 {
      position: absolute;
      z-index: 1;
      width: 150px;
      height: 48px;
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0.14);
      border: 3px solid transparent;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #fff;
      font-weight: 600;
      font-size: 16px;
      background-color: #212635;
      background-image: linear-gradient(to bottom right, #0b0333, #212635), linear-gradient(125deg, hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, 0.6) 50%, hsla(0, 0%, 100%, 0) 53%);
      background-size: 100%, 200%;
      background-position: 0, -250px;
      background-origin: border-box;
      background-clip: padding-box, border-box;
      animation: border-glint 4s linear infinite backwards;
      animation-delay: 1s;
      overflow: hidden;

      &::after {
        content: '';
        position: absolute;
        left: 120%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-image: linear-gradient(125deg, hsla(0, 0%, 100%, 0) 30%, hsla(0, 0%, 100%, 0.4) 50%, hsla(0, 0%, 100%, 0) 52%);
        animation: glinet-t 4s linear infinite backwards;
        animation-delay: -3s;
      }
    }
  }
  .list {
    margin-top: 100px;
    display: flex;
    max-width: 1240px;
    background: #fff;
    padding: 10px;
    border: 5px solid #f0f0f8;
    background-color: #fcfcff;
    border-radius: 20px;
    .item {
      position: relative;
      margin: 10px;
      flex: 1;
      flex-shrink: 0;
      .block-title {
        position: relative;
        background-color: #e6e9ff;
        color: #565a6b;
        padding: 12px;
        font-size: 16px;
        border-radius: 5px;
        text-align: center;
        .arrow {
          width: 10px;
          height: 10px;
          background-color: #e6e9ff;
          left: 50%;
          position: absolute;
          bottom: -5px;
          transform: translateX(-50%) rotate(45deg);
        }
      }
      .block-3dscroll {
        margin-top: 20px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        padding: 1.5px;
        border-radius: 10px;
        &::before {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          content: '';
          display: block;
          padding-bottom: 200%;
          width: 200%;
          z-index: 0;
          background-color: #fff;
        }
        &:hover {
          &::before {
            background: conic-gradient(from 180deg at 50% 50%, #9a8bff 0deg, #ffac8b 45deg, transparent 90deg, transparent 180deg, #9a8bff 180deg, #ffac8b 225deg, transparent 270deg);
            animation: rotate-scroll 8s linear infinite;
          }
        }
      }
      .block-content {
        position: relative;
        background: #fff;
        border-radius: 10px;
        padding:  20px 10px 0;
        overflow: hidden;
      
        &:hover {
          img {
            transform: rotate(-10deg) translateX(24px);
            position: relative;
            transform-origin: right bottom;
          }
        }
        .tag {
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(171, 181, 255, 0.3);
          color: #5147ff;
          font-size: 12px;
          padding: 5px 8px;
          border-top-left-radius: 12px;
          border-bottom-right-radius: 12px;
        }
        .title {
          font-size: 20px;
          color: #000;
          text-align: center;
          margin-top: 10px;
          margin-bottom: 10px;
        }
        .desc {
          font-size: 14px;
          line-height: 25px;
          height: 75px;
          color: rgba(32, 41, 69, 0.62);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          text-align: justify;
          text-overflow: ellipsis;
          /* 兼容 Firefox */
          display: -moz-box;
          -moz-box-orient: vertical;
          -moz-line-clamp: 3;
          /* 标准写法（部分浏览器支持） */
          display: box;
          box-orient: vertical;
          line-clamp: 3;
        }
        .img {
          width: 189px;
          text-align: center;
          display: block;
          margin: 20px auto 0;
          img {
            height: 189px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            box-shadow: 0 -2.7px 16.2px 0 rgba(56, 49, 80, 0.12);
          }
        }
      }
    }
  }
}
</style>
